<template>
    <div id="rich"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  let myRich = null;
  let myEchart = null;
  onMounted(() => {
    myRich = document.getElementById("rich");
    myEchart = echarts.init(myRich);
    let option = {
      xAxis: {
        type: 'category',
        data: ['上午', '中午', '下午', '夜间']
      },
      yAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', "周四", "周六", "周日"]
      },
      visualMap: {
        min: 1,
        max: 30,
        text: ['30度', '0度'],
        orient: 'horizontal',
        left: 'center',
      },
      series: [
        {
            type: 'heatmap',
            label: {
                show: true
            },
            data: [
                [0, 0, 13],
                [1, 2, 24],
                [2, 1, 15],
                [3, 3, 18]
            ]
        }
      ]
    };
    myEchart.setOption(option);
  });
  onUnmounted(() => {
    myEchart.dispose(myRich);
  });
  </script>
  
  <style lang="less" scoped>
  #rich {
    width: 800px;
    height: 400px;
  }
  </style>
  